<template>
  <el-scrollbar style="height: 100%">
    <div class="container p-40">
      <div>
        <el-form
          ref="basicForm"
          :disabled="this.$route.params.state == '0'"
          v-loading="loading"
          :rules="rules"
          :model="basicForm"
          label-width="80px"
        >
          <p class="f-17 m-b-20">系数模板</p>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item prop="coefficientName" label="系数名称">
                <el-input
                  placeholder="请填写"
                  v-model="basicForm.coefficientName"
                ></el-input>
              </el-form-item>
            </el-col>
            <template v-if="RoomSelect">
              <button
                class="el-button el-button--mini el-button--primary"
                @click="changeTemplate"
              >
                更换系数模板
              </button>
              <button
                class="el-button el-button--mini el-button--info"
                @click="$router.push('/room/list')"
              >
                返回
              </button>
            </template>
          </el-row>
          <p class="f-17 m-b-20">水费系数</p>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="小于" prop="lessThanWater">
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.lessThanWater"
                >
                  <span slot="suffix">吨时</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="水费单价" prop="lessUnitPriceOfWater">
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.lessUnitPriceOfWater"
                >
                  <span slot="suffix">元/吨</span>
                </el-input>
              </el-form-item>
            </el-col>

            <!-- 1014 -->
            <el-col :span="8">
              <el-form-item
                label="排水费单价"
                label-width="100px"
                prop="lessUnitPriceDrainageFee"
              >
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.lessUnitPriceDrainageFee"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label-width="0" class="el-form-item-2">
                <el-input
                  placeholder="请填写"
                  disabled
                  :value="basicForm.lessThanWater"
                >
                  <span slot="suffix">吨</span>
                </el-input>
                <span>至</span>
                <el-input
                  placeholder="请填写"
                  disabled
                  :value="basicForm.greaterThanWater"
                >
                  <span slot="suffix">吨时</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="水费单价" prop="middleUnitPriceOfWater">
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.middleUnitPriceOfWater"
                >
                  <span slot="suffix">元/吨</span>
                </el-input>
              </el-form-item>
            </el-col>

            <!-- 1014 -->
            <el-col :span="8">
              <el-form-item
                label="排水费单价"
                label-width="100px"
                prop="middleUnitPriceDrainageFee"
              >
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.middleUnitPriceDrainageFee"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="大于" prop="greaterThanWater">
                <el-input
                  placeholder="请填写"
                  v-model="basicForm.greaterThanWater"
                >
                  <span slot="suffix">吨时</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="水费单价" prop="greaterUnitPriceOfWater">
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.greaterUnitPriceOfWater"
                >
                  <span slot="suffix">元/吨</span>
                </el-input>
              </el-form-item>
            </el-col>

            <!-- 1014 -->
            <el-col :span="8">
              <el-form-item
                label="排水费单价"
                label-width="100px"
                prop="greaterUnitPriceDrainageFee"
              >
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.greaterUnitPriceDrainageFee"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="水损系数" prop="waterLossCoefficient">
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.waterLossCoefficient"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="加压系数" prop="pressurizationcoefficient">
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.pressurizationcoefficient"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="水费税率" prop="waterTariffRate">
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.waterTariffRate"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="热水单价" prop="unitPriceHotWater">
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.unitPriceHotWater"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <p class="f-17 m-b-20">电费系数</p>
          <!-- 固定头部 -->
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="小于" prop="lessElectricityConsumption">
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.lessElectricityConsumption"
                >
                  <span slot="suffix">度时</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电费单价" prop="lessUnitPriceOfElectricity">
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.lessUnitPriceOfElectricity"
                >
                  <span slot="suffix">元/度</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="倍率" prop="electricRate">
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.electricRate"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label-width="0"
                prop=" tenantType"
                class="el-form-item-2"
              >
                <el-input
                  placeholder="请填写"
                  disabled
                  :value="basicForm.lessElectricityConsumption"
                >
                  <span slot="suffix">度</span>
                </el-input>
                <span>至</span>
                <el-input
                  placeholder="请填写"
                  disabled
                  :value="basicForm.greaterElectricityConsumption"
                >
                  <span slot="suffix">度时</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="电费单价"
                prop="middleUnitPriceOfElectricity"
              >
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.middleUnitPriceOfElectricity"
                >
                  <span slot="suffix">元/度</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电损系数" prop="electricLossCoefficient">
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.electricLossCoefficient"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="大于" prop="greaterElectricityConsumption">
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.greaterElectricityConsumption"
                >
                  <span slot="suffix">度时</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="电费单价"
                prop="greaterUnitPriceOfElectricity"
              >
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.greaterUnitPriceOfElectricity"
                >
                  <span slot="suffix">元/度</span>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <p class="f-17 m-b-20">煤气系数</p>
          <p class="f-17 m-b-20">夏季（5-10月）指标值</p>
          <el-row :gutter="40">
            <el-col :span="10">
              <el-form-item
                label="第一档户月用气量为0至"
                label-width="180px"
                prop="summerLessGasVolume"
              >
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.summerLessGasVolume"
                >
                  <template slot="suffix"> (含)立方米时 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="煤气单价" prop="summerOneUnitPrice">
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.summerOneUnitPrice"
                >
                  <template slot="suffix"> 元/立方米 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" style="display: flex">
              <el-form-item
                label="第二档户月用气量为"
                class="el-form-item-2"
                label-width="180px"
              >
                <el-input
                  disabled
                  type="number"
                  placeholder="请填写"
                  :value="basicForm.summerLessGasVolume"
                ></el-input>
                至
                <el-input
                  disabled
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.summerGreaterGasVolume"
                >
                  <template slot="suffix"> (含)立方米时 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="煤气单价" prop="summerTwoUnitPrice">
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.summerTwoUnitPrice"
                >
                  <template slot="suffix"> 元/立方米 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item
                label="第三档户月用气量"
                label-width="180px"
                prop="summerGreaterGasVolume"
              >
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.summerGreaterGasVolume"
                >
                  <template slot="suffix"> 以上立方米时 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="煤气单价" prop="summerThreeUnitPrice">
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.summerThreeUnitPrice"
                >
                  <template slot="suffix"> 元/立方米 </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <p class="f-17 m-b-20">冬季（11-次年4月）指标值</p>
          <el-row :gutter="40">
            <el-col :span="10">
              <el-form-item
                label="第一档户月用气量为0至"
                label-width="180px"
                prop="winterLessGasVolume"
              >
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.winterLessGasVolume"
                >
                  <template slot="suffix"> (含)立方米时 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="煤气单价" prop="winterOneUnitPrice">
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.winterOneUnitPrice"
                >
                  <template slot="suffix"> 元/立方米 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" style="display: flex">
              <el-form-item
                class="el-form-item-2"
                label="第二档户月用气量为"
                label-width="180px"
              >
                <el-input
                  type="number"
                  disabled
                  placeholder="请填写"
                  :value="basicForm.winterLessGasVolume"
                ></el-input>
                至
                <el-input
                  type="number"
                  disabled
                  placeholder="请填写"
                  v-model="basicForm.winterGreaterGasVolume"
                >
                  <template slot="suffix"> (含)立方米时 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="煤气单价" prop="winterTwoUnitPrice">
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.winterTwoUnitPrice"
                >
                  <template slot="suffix"> 元/立方米 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item
                label="第三档户月用气量为"
                label-width="180px"
                prop="winterGreaterGasVolume"
              >
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.winterGreaterGasVolume"
                >
                  <template slot="suffix"> 以上立方米时 </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="煤气单价" prop="winterThreeUnitPrice">
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.winterThreeUnitPrice"
                >
                  <template slot="suffix"> 元/立方米 </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <p class="f-17 m-b-20">其他费用</p>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item
                label="垃圾处理单价"
                label-width="120px"
                prop="unitPriceGarbageTreatment"
              >
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.unitPriceGarbageTreatment"
                >
                  <span slot="suffix">元</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="垃圾处理费倍率"
                label-width="120px"
                prop="garbageTreatmentMagnification"
              >
                <el-input
                  type="number"
                  placeholder="请填写"
                  v-model="basicForm.garbageTreatmentMagnification"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="排水费系数"
                label-width="100px"
                prop="drainageCoefficient"
              >
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.drainageCoefficient"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <p class="f-14 m-b-20 m-l-9">以下收费项目输入数字后将使用输入金额计算，默认为空时使用默认规则或禁用</p>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item
                label="垃圾处理费"
                label-width="120px"
                prop="garbageDisposalFee"
              >
                <el-tooltip content="填写后直接取该金额,否则使用原有计算方法" placement="top" effect="light">
                  <el-input
                    type="number"
                    placeholder="￥请填写"
                    v-model="basicForm.garbageDisposalFee"
                  >
                    <span slot="suffix">元</span>
                  </el-input>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="电梯费单价"
                label-width="120px"
                prop="unitPriceElevatorFee"
              >
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.unitPriceElevatorFee"
                >
                  <span slot="suffix">元/平方米</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="卫生费"
                label-width="100px"
                prop="sanitationFee"
              >
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.sanitationFee"
                >
                  <span slot="suffix">元</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="本体维修基金"
                label-width="120px"
                prop="maintenanceFund"
              >
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.maintenanceFund"
                >
                  <span slot="suffix">元</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="电视费/煤保"
                label-width="120px"
                prop="gasInsurance"
              >
                <el-input
                  type="number"
                  placeholder="￥请填写"
                  v-model="basicForm.gasInsurance"
                >
                  <span slot="suffix">元/月</span>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row
          v-if="
            $route.params.state != '0' &&
            !(basicForm.contractAuditState === 2 && state != 0) &&
            !RoomSelect
          "
          justify="center"
          style="margin-top: 0.2rem"
        >
          <el-col :span="4" :offset="10">
            <el-button type="primary" @click="submitForm" :loading="hasSubmit"
              >确定</el-button
            >
            <el-button @click="close">取消</el-button>
          </el-col>
        </el-row>
        <el-row v-if="$route.params.state == '0' && !RoomSelect">
          <el-col :span="4" :offset="10">
            <el-button type="info" @click="close">返回</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import {
  addCoefficient,
  updateCoefficientTemplate,
  getCostTemplateById,
} from "@/api/operations/coefficient/coefficient.js";

export default {
  data() {
    return {
      RoomSelect: false,
      hasSubmit: false,
      //是否修改
      isUpdate: false,
      loading: false,
      //0,个人 1,企业 选择用户
      //全部FROM
      basicForm: {
        createdBy: 1,
        lastUpdatedBy: 1,
        fkRoomId: null,
        tenantType: "0",
      },
      rules: {
        coefficientName: [
          {
            required: true,
            message: "此项必填，请输入",
          },
        ],
        lessThanWater: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        lessUnitPriceOfWater: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        waterLossCoefficient: [
          {
            required: true,
            message: "此项必填，请输入",
          },
        ],
        middleUnitPriceOfWater: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        pressurizationcoefficient: [
          {
            required: true,
            message: "此项必填，请输入",
          },
        ],
        greaterThanWater: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        greaterUnitPriceOfWater: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        waterTariffRate: [
          {
            required: true,
            message: "此项必填，请输入",
          },
        ],
        unitPriceHotWater: [
          {
            required: true,
            message: "此项必填，请输入",
          },
        ],        
        lessElectricityConsumption: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        lessUnitPriceOfElectricity: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber4 },
        ],
        electricRate: [
          {
            required: true,
            message: "此项必填，请输入",
          },
        ],
        middleUnitPriceOfElectricity: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber4 },
        ],
        electricLossCoefficient: [
          {
            required: true,
            message: "此项必填，请输入",
          },
        ],
        greaterElectricityConsumption: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        greaterUnitPriceOfElectricity: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber4 },
        ],
        summerLessGasVolume: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        summerOneUnitPrice: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        summerTwoUnitPrice: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        summerGreaterGasVolume: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        summerThreeUnitPrice: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        winterLessGasVolume: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        winterOneUnitPrice: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        winterTwoUnitPrice: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        winterGreaterGasVolume: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        winterThreeUnitPrice: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        unitPriceElevatorFee: [
          { validator: this.$rules.PriceNumberCanBeNull },
        ],
        sanitationFee: [
          { validator: this.$rules.PriceNumberCanBeNull },
        ],
        maintenanceFund: [
          { validator: this.$rules.PriceNumberCanBeNull },
        ],
        unitPriceGarbageTreatment: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        garbageDisposalFee: [
          { validator: this.$rules.PriceNumberCanBeNull },
        ],
        garbageTreatmentMagnification: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        gasInsurance: [
          { validator: this.$rules.PriceNumberCanBeNull },
        ],

        // 1014
        drainageCoefficient: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        greaterUnitPriceDrainageFee: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        lessUnitPriceDrainageFee: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
        middleUnitPriceDrainageFee: [
          {
            required: true,
            message: "此项必填，请输入",
          },
          { validator: this.$rules.PriceNumber },
        ],
      },
    };
  },
  methods: {
    loadData(id) {
      getCostTemplateById(id, this.$route.params.state).then((res) => {
        if (res.code === 30000) {
          this.$promptBox
            .show({ title: "提示信息", message: res.msg })
            .catch((err) => {
              window.history.go(-1);
            });
        }
        this.basicForm = res.data;
      });
    },
    changeTemplate() {
      this.$router.push("/coefficient/list?roomId=" + this.$route.query.roomId);
    },
    submitForm() {
      this.hasSubmit = true;
      this.$refs["basicForm"].validate((vali) => {
        if (vali) {
          switch (this.$route.params.state + "") {
            case "1":
              updateCoefficientTemplate(this.basicForm).then((res) => {
                this.hasSubmit = false;
                if (res.code === 10000) {
                  this.$message.success(res.msg);
                  this.close();
                }
              });
              break;
            case "2":
              addCoefficient(this.basicForm).then((res) => {
                this.hasSubmit = false;
                if (res.code === 10000) {
                  this.$message.success(res.msg);
                  this.close();
                }
              });
              break;
          }
        } else this.hasSubmit = false;
      });
    },
    close() {
      window.history.go(-1);
      // this.$router.push('/coefficient/list');

      //let rex = this.$route.matched[this.$route.matched.length - 1].regex;
      //this.$store.commit("delTabs", rex);
    },
  },
  mounted() {
    if (this.$route.params.id) {
      this.loadData(this.$route.params.id);
    }
    if (this.$route.query.roomId) {
      this.RoomSelect = true;
    }
  },
};
</script>
<style scoped>
.el-form-item-2 > .el-form-item__content {
  display: flex;
}

.el-form-item-2 > .el-form-item__content > .el-input:nth-of-type(1) {
  margin-right: 0.1rem;
}

.el-form-item-2 > .el-form-item__content > .el-input:nth-of-type(2) {
  margin-left: 0.1rem;
}
</style>
